<template>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="一级分类" >
        <el-select v-model="formInline.oneRegion" placeholder="请选择" @change="getListData(2,formInline.oneRegion,1)" :disabled="!Operations">
            <el-option :label="data.name" :value="data.id" v-for="data,index in listData['1']" :key="index" v-if="listData['1']"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
        <el-select v-model="formInline.twoRegion" placeholder="请选择" @change="getListData(3,formInline.twoRegion,2)" :disabled="!Operations">
            <el-option :label="data.name" :value="data.id" v-for="data,index in listData['2']" :key="index" v-if="listData['2']"></el-option>
        </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
        <el-select v-model="formInline.threeRegion" placeholder="请选择" @change="getListData('')" :disabled="!Operations">
            <el-option :label="data.name" :value="data.id" v-for="data,index in listData['3']" :key="index" v-if="listData['3']"></el-option>
        </el-select>
    </el-form-item>
</el-form>

</div>
</template>

<script>
export default {
    name:'Menus',
        data() {
        return {
        formInline: {
            oneRegion: '',
            twoRegion: '',
            threeRegion: ''
        },
        listData:{
            1:[],
            2:[],
            3:[]
        }
            }
    },
    methods: {
        async getListData(num=0,id='',clear=9999){
            //数据初始化开始
            if(clear == 1){
                this.formInline.twoRegion = ''
                this.formInline.threeRegion = ''
            }else if(clear == 2){
                this.formInline.threeRegion = ''
            }
            for(let key in this.listData){
                if(key > clear){
                    this.listData[key] = ''
                }
            }
            //数据初始化结束

            //发送请求开始
            if(num){
                const result = await this.$API.attr.reqCategory(num,id)
                if(result.code == 200){
                this.listData[num] = result.data
            }
            }
            //发送请求结束

            //父组件数据同步开始
            let sofiaer = true
            for (const key in this.formInline) {
                if(!this.formInline[key]){
                    sofiaer = false
                }
            }
            if(sofiaer){
                this.$emit('setAttributeData',this.formInline)
            }else{
                this.$emit('setAttributeData')
            }
            //父组件数据同步结束
        },
    },
    beforeMount(){
        this.getListData(1)
    },
    props:['Operations']
}
</script>

<style>

</style>